div.or {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px black solid;
  /* 盒子阴影 */
  box-shadow: 10px 10px 20px black;
  /* 文本阴影 */
  text-shadow: 5px 5px 10px red;
}
div.deg {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 15px;
  /* 可以给定正负值 */
  transform: rotate(30deg);
}
div.big {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transform: scale(1.5, 1.5);
  margin: 0 auto;
  float: inline-end;
}
div.xuan {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transform: skew(15deg, 15deg);
}
div.td {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transform: rotateX(180deg);
}
body {
  background-image: url(https://i0.hippopx.com/photos/856/151/610/panorama-sunrise-dawn-bled-thumb.jpg);
}
section.chr {
  background-image: url(08/pic/white2.jpg);
  opacity: 0.8;
  width: 300px;
  height: 600px;
  margin: 20px;
}
.box {
  width: 100px;
  height: 100px;
  background: yellowgreen;
  border-radius: 10px;
  margin-left: 20px;
  transition-duration: 0.5s;
  transition-timing-function: linear;
}
.box:hover {
  background: rgba(224, 52, 22, 0.199);
  width: 300px;
}
.ra {
  width: 100px;
  height: 100px;
  background: violet;
  border-radius: 10px;
  margin-left: 30px;
  transition-property: background, border-radius;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}
.ra:hover {
  border-radius: 50%;
  background-color: brown;
}
.ease {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 10px;
  margin-left: 30px;
  transition-duration: 3s;
  transition-timing-function: ease-in;
}
.ease:hover {
  outline: 3px red solid;
  width: 500px;
}
hr {
  border: 4px orange solid;
  width: 100px;
  transition: all 0.2s ease-in-out;
}

hr:hover {
  width: 300px;
  border: 8px red solid;
}
div.time {
  width: 120px;
  height: 120px;
  background-color: olivedrab;
  border-radius: 2rem;
  transition-property: background-color, border-radius;
  transition-duration: 1s, 3s;
  transition-timing-function: linear;
}
div.time:hover {
  background-color: palegreen;
  border-radius: 50%;
}
